<template>
  <div class="area">
    1212
    <van-popup v-model="showArea" position="bottom">
      <van-area :area-list="areaList" @change="areaChange" @confirm="confirm" @cancel="cancel" />
    </van-popup>
  </div>
</template>

<script>
import api from 'api/api'
export default {
  data () {
    return {
      areaList: {
        province_list: {
          110000: '北京市',
          120000: '天津市'
        },

        city_list: {},
        county_list: {}
      },
      showArea: true,
    }
  },
  created () {
    this.getPovice()
  },
  methods: {
    getPovice () {
      api.getAllProvince().then(res => {
        if (res.data) {
          let obj = {}
          res.data.forEach(element => {
            obj[element.id] = element.name
          });
          this.areaList.province_list = obj
        }


      })
    },
    getCity () {

      api.getCityByPid().then(res => {
        let obj = {
          110100: '北京市',
          120100: '天津市',
          130100: '石家庄市',
          130200: '唐山市',
        }
        this.areaList.city_list = obj
      })
    },
    getCounty () {

      api.getCountyByPid({}).then(res => {
        this.areaList.county_list = {
          110101: '东城区',
          110102: '西城区',
          110105: '朝阳区',
          110106: '丰台区',
          110107: '石景山区',
          110108: '海淀区',
          110109: '门头沟区',
          110111: '房山区',
          110112: '通州区',
          110113: '顺义区',
          110114: '昌平区',
          110115: '大兴区',
          110116: '怀柔区',
          110117: '平谷区',
          110118: '密云区',
          110119: '延庆区',
          120101: '和平区',
          120102: '河东区',
          120103: '河西区',
          120104: '南开区',
          120105: '河北区',
          120106: '红桥区',
          120110: '东丽区',
          120111: '西青区',
        }
      })
    },
    areaChange (val, msg) {
      console.log(msg)
      if (msg[1] == undefined) {
        this.getCity(Object.keys(msg[0]))
      }
      if (msg[1] && !msg[2]) {
        this.getCounty(Object.keys(msg[1]))
      }
    },
    confirm (msg) {
      console.log(msg)
      this.$emit('confirm', msg)
    },
    cancel () {
      this.$emit('cancel')
    }
  }
}
</script>

<style>
</style>